<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结课作业提高版</title>
  <link rel="stylesheet" href="./css/components.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/config.js"></script>
  <script src="./js/tool-kits.js"></script>
  <script src="./js/resaturant.js"></script>
</head>

<body>
  <div class="stat" id="stat">
    <div class="box box-stat box-top">
      <div class="process yellow BT">
        <div class="haveWork half"></div>
      </div>
      <div class="box-text">W1 D1</div>
    </div>
    <div class="box box-stat box-top money">
      <div class="process yellow BT">
        <div class="haveWork half"></div>
      </div>
      <div class="box-text ">100</div>
    </div>
  </div>
  <div class="cooksWapper" id="cooksWapper">
    <div class="cooks">
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
          <div class="tags tags-bottom">
            <div class="tag">
              <div class="process gray LR">
                <div class="haveWork half"></div>
              </div>
              <div class="box-text">213</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
          <div class="tags tags-bottom">
            <div class="tag">
              <div class="process gray LR">
                <div class="haveWork half"></div>
              </div>
              <div class="box-text">213</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cook">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="customersWapper" id="customersWapper">
    <div class="customers">
      <div class="customer">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="customer">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
          <div class="tags tags-right">
            <div class="tag">
              <div class="process gray LR">
                <div class="haveWork half"></div>
              </div>
              <div class="box-text">213</div>
            </div>
          </div>
        </div>
      </div>

      <div class="customer">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
          <div class="tags tags-right">
            <div class="tag">
              <div class="process gray LR">
                <div class="haveWork half"></div>
              </div>
              <div class="box-text">213</div>
            </div>
          </div>
        </div>
      </div>

      <div class="customer">
        <div class="face-box">
          <div class="face">
            <div class="process gray RL">
              <div class="haveWork half"></div>
            </div>
            <div class="face-img">
              <img src="./img/cus-2.png" alt="">
            </div>
          </div>
          <div class="tags tags-right">
            <div class="tag">
              <div class="process gray LR">
                <div class="haveWork half"></div>
              </div>
              <div class="box-text">213</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="customerWaiting" id="customerWaiting">
    <div class="customerWait">
      <div class="face-box">
        <div class="face">
          <div class="process gray RL">
            <div class="haveWork half"></div>
          </div>
          <div class="face-img">
            <img src="./img/cus-2.png" alt="">
          </div>
        </div>
        <div class="tags tags-bottom">
          <div class="tag">
            <div class="process gray LR">
              <div class="haveWork half"></div>
            </div>
            <div class="box-text">213</div>
          </div>
        </div>
      </div>
    </div>
    <div class="customerWait">
      <div class="face-box">
        <div class="face">
          <div class="process gray RL">
            <div class="haveWork half"></div>
          </div>
          <div class="face-img">
            <img src="./img/cus-2.png" alt="">
          </div>
        </div>
        <div class="tags tags-bottom">
          <div class="tag">
            <div class="process gray LR">
              <div class="haveWork half"></div>
            </div>
            <div class="box-text">213</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/components.js"></script>
<script src="./js/index.js"></script>

</html>